<template>
	<view class="pages">
		<com-head textTit="提交订单" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<!-- 商品 -->
		<view class="card-box" v-if="details.goods && details.goods.length">
			<view class="card-zi "  :class="{'border-bot':isDelivery}">
				<text>请选择收货方式</text>
				<text class="active-inp">{{isDelivery?'门店自提':'物流配送'}}</text>
			</view>
			<view v-if="isDelivery" class="card-zi pls">
				<text>选择自提门店</text>
				<text class="active-inp">{{addressStore.title || '-'}}</text>
			</view>
			<view v-if="isDelivery" class="card-zi">
				<text>选择自提时间</text>
				<text class="active-inp">{{timeTransformation(details.address_time, 1)}}</text>
			</view>
		</view>
		
		<view class="takeMain" v-if="(details.goods && details.goods.length) && !isDelivery">
			<view class="takeMain-view">
				<view class="takeMain-view-main">
					<view class="site"><text>收货人：{{details.address.realname}}</text><text>{{details.address.phone}}</text></view>
					<view class="title">
					<span v-for="row in details.address.area">{{row.area_name}}</span>{{details.address.address}}</view>
				</view>
			</view>
		</view>
		
		<!-- 项目 -->
		<view class="goods-box" v-if="details.project">
			<view class="goods" v-for="(item,index) in details.project">
				<image :src="item.project.pic[0]" mode="aspectFill"></image>
				<view>
					<view class="t1">
						{{item.project.name}}
					</view>
					<view class="tt">
						<view v-for="row in item.project.tags">{{row}}</view>
					</view>
					<view class="t2">
						<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/shijian223.png"></image>
						{{item.duration}}分钟
					</view>
					<view class="t2" v-if="item.use_num">
						可用{{item.use_num}}次
					</view>
					<view class="price">
						<text v-if="is_single != 1" class="text"><text>¥</text>{{item.project.price}}</text>
						<text v-else class="text"><text>¥</text>{{item.single_price}}</text>
						<text class="left-auto" style="color: #999;">× 1</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 商品 -->
		<view class="goods-box" v-if="details.goods">
			<view class="goods" v-for="item in details.goods">
				<image :src="item.pic[0]" mode="aspectFill"></image>
				<view>
					<view class="t1">
						{{item.goods_name}}
					</view>
					<view class="price">
						<text class="text"><text>¥</text>{{item.sale_price}}</text>
						<text class="left-auto" style="color: #999;">× {{item.number}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="card-box" v-if="!out_trade_no">
			<view class="card-zi">
				<text>优惠券</text>
				<text class="" v-if="couponList.length && !couponInfo" @click="showCoupon = true">{{couponList.length}}张可用</text>
				<view class="" v-if="couponList.length && couponInfo"  @click="showCoupon = true">
					<text class="" v-if="couponInfo.couponPool.off_type == 0">
						减{{Number(couponInfo.couponPool.face_value).toFixed(2)}}
					</text>
					<text class="" v-if="couponInfo.couponPool.off_type == 1">
						{{couponInfo.couponPool.discount}}折，最大折扣{{Number(couponInfo.couponPool.max_discount).toFixed(2)}}
					</text>
				</view>
				<text class="noCoupon" v-if="!couponList.length">没有可用优惠券</text>
			</view>
			<view class="card-zi" v-if="userInfo.vip_id >= 1">
				<text>会员卡</text>
				<text class="">{{userInfo.vip_no}}</text>
			</view>
		</view>
		<view class="card-box">
			<view class="card-zi" >
				<text>商品总价</text>
				<text class="price">¥{{salsePrice}}</text>
			</view>
			<view class="card-zi" v-if="couponPrice && couponPrice != '0.00'">
				<text>优惠</text>
				<text class="price">¥{{couponPrice}}</text>
			</view>
			<view class="card-zi" v-if="(discountAmount && discountAmount != '0.00') || discountAmount != 0">
				<text>会员卡折扣</text>
				<!-- <text class="price" v-if="form.coupon_id">¥0.00</text> -->
				<text class="price">¥{{discountAmount}}</text>
			</view>
			<view class="card-zi" v-if="details.integral_price && details.integral_price != '0.00'">
				<text>积分抵扣</text>
				<text class="price">{{details.integral_price}}</text>
			</view>
			<view class="card-zi" v-if="details.freight && details.freight != '0.00'">
				<text>运费</text>
				<text class="price">¥{{details.freight}}</text>
			</view>
		</view>
		
		
		<!-- 支付方式 -->
		<view class="groupList">
			<view class="item">
				<text>支付方式</text>
			</view>
			<view class="items">
				<view class="select" v-for="(item,i) in pay" :key="item" @click="payIndex=i">
					<image :src="item.img" mode="aspectFill"></image>
					<view>{{item.title}}</view>
					<view :class="payIndex==i?'icon-a-xingzhuang1':'icon-weixuanzhong'" class="iconfont left-auto"></view>
				</view>
			</view>
		</view>
		
		<!-- <u-popup v-model="show1" safe-area-inset-bottom border-radius="34" closeable mode="bottom">
			<view class="select-pay">
				<view class="title">请选择支付方式</view>
				<view class="select" v-for="(item,i) in pay" :key="item" @click="payIndex=i">
					<image :src="item.img" mode="aspectFill"></image>
					<view>{{item.title}}</view>
					<view :class="payIndex==i?'icon-a-xingzhuang1':'icon-weixuanzhong'" class="iconfont left-auto"></view>
				</view>
				<view class="price-box">
					金额：
					<text>¥{{Number(totalPrice).toFixed(2)}}</text>
					<view class="btn" @click="submit()">支付</view>
				</view>
			</view>
		</u-popup> -->
		
		<!-- 选择可用优惠券 -->
		<u-popup v-model="showCoupon" safe-area-inset-bottom border-radius="34" closeable mode="bottom">
			<view class="chioseTitle">选择优惠券</view>
			<scroll-view scroll-y="true" style="max-height: 600rpx;">
				<view class="couponList" v-if="couponList.length">
					<view class="list" v-for="(ele,index) in couponList" :key="index">
						<image src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/10/2x-2.png" mode=""></image>
						<view class="couponContent">
							<view class="left">
								<view class="couponL" v-if="ele.couponPool.off_type == 0">
									<view class="price">￥<text>{{Number(ele.couponPool.face_value).toFixed(2)}}</text></view>
									<view class="fullReduction">满{{Number(ele.couponPool.min_value).toFixed(2)}}元可用</view>
								</view>
								<view class="couponL" v-else>
									<view class="price"><text>{{ele.couponPool.discount}}</text>折</view>
									<view class="fullReduction">最大折扣{{Number(ele.couponPool.max_discount).toFixed(2)}}</view>
								</view>
								<view class="couponM">
									<view class="t1">{{ele.couponPool.title}}({{getStausText(ele.couponPool.coupon_scope_use_id)}})</view>
									<view class="t2">有效期：{{$u.timeFormat(ele.couponPool.start_time, 'yyyy-mm-dd')}}至{{$u.timeFormat(ele.couponPool.end_time,'yyyy-mm-dd')}}</view>
								</view>
							</view>
							<view class="couponR">
								<view @click="chioseCoupon(ele,index)" class="iconfont icon" :class="ele.isCheck ? 'icon-a-xingzhuang1' : 'icon-weixuanzhong' "></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<view class="bottom-buy ">
			<view class="total-price">
				合计：
				<text>¥{{Number(totalPrice).toFixed(2)}} <text v-if="details.freight && details.freight != '0.00'">(含运费：{{details.freight}})</text></text>
			</view>
			
				<view class="payForAnother" @click="negotiationFun()" v-if="buyProjectCode">
					<!-- <button open-type='share' class="sharebtn" > -->
						代付
						<!-- </button> -->
				</view>
			
			<view @click="payFun()" class="btn-ho left-auto">支付</view>
		</view>
		
		
		<!-- 公共头筛选组件 -->
		<u-popup v-model="negotiationShow" safe-area-inset-bottom mode="center" border-radius="40" @close="closeFun" closeable>
			<view class="specification">
				<view class="specification__title">
					提示
				</view>
				<view class="specification__dec">
					是否发送好友代付此订单？
				</view>
				
				<view style="height: 50rpx;"></view>
				<view class="subimts">
					<button open-type='share' class="sharebtn" >
						<view @click="confirm()" class="cancel">确认代付</view>
					</button> 
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				couponInfo:"",//优惠券信息
				showCoupon:false,
				couponList:[],//优惠券列表
				form:{
					is_single: 0,
					project_id:'',
					store_id:'',
					number:1,
					coupon_id:'',
					is_vip:'',
					
					staff_id: '',
					staff_sub_id: '',
					
					tech: '',// 技师
					remark: '', // 备注
					name: '',// 姓名
					mobile: '',// 手机
					date: '',// 日期
					time: '', // 时间节点
					user_num:''// 人数
				},
				details:{},
				peoject_id:'',
				num:1,
				show1:false,
				payIndex:0,
				discountAmount:0,
				couponPrice:0,
				salsePrice:0,
				totalPrice:0,
				oldPrice:0,
				oldPrice1:0,
				isSubmit:false,
				buyProjectCode: true,
				negotiationShow: false,
				pay:[{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/member.png',
					title:'会员卡支付（门店）',
					id: 1,
				},
				{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/member.png',
					title:'会员卡支付（平台）',
					id: 4,
				},
				{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/wx.png',
					title:'微信支付',
					id: 2,
				}],
				out_trade_no: '',
				isShop: '',
				isDelivery: false,
				addressStore: {},
				projectList: [],
				scrollTop: 0,
				orderId: '',
				negotiation: false // 代付状态
			};
			
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad({peoject_id, out_trade_no, orderId, isShop, hiddCar}) {
			if(hiddCar === "1"){
				this.isDelivery = false
				this.receiving = [{
					value: '2',
					label: '物流配送'
				}];
				this.pay = [
				{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/wx.png',
					title:'微信支付',
					id: 2,
				}]
			}
			// console.log(34254, peoject_id)
			if (peoject_id) {
				this.peoject_id = peoject_id
				await this.getDetails()
			}
			if (out_trade_no) {
				this.isShop = isShop
				this.out_trade_no = out_trade_no
				await this.getOrders(out_trade_no, orderId)
			}
			
			
			// 如果是推荐项目  只能微信支付
			console.log(899, this.isRecommend)
			if (this.isRecommend === "1") {
				this.pay = [
				{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/wx.png',
					title:'微信支付',
					id: 2,
				}]
			}
		},
		onShareAppMessage: function (res) {
		  // if (res.from !== 'button') {
			  console.log(55, this.orderId)
			  this.negotiationShow = false
			  return {
				 title: this.details.project[0].name || '友约',
				 imageUrl: this.details.project[0].project.pic[0] || '',
				 path: '/pages/shop/negotiation?orderId=' + this.orderId
			  }
		   // }
		},
		methods:{
			closeFun() {
				// this.utlis.Toast("已取消代付")
			},
			negotiationFun(){
				if (this.out_trade_no) {
					this.negotiationShow = true
				} else {
					this.negotiation = true
					this.negotiationShow = true
					this.submit()
				}
				
			},
			payFun() {
				console.log(23, this.payIndex, this.out_trade_no)
				if (this.out_trade_no) {
					this.wxPayFun()
				} else {
					this.submit()
				}
			},
			async wxPayFun() {
				if(this.isSubmit)return
				this.isSubmit = true
				uni.login({
					success: async (loginRes) => {
						let {code,data} = await this.$u.api.hfPay({
							out_trade_no: this.out_trade_no, 
							// pay_type: this.payIndex == 0 ? 1 : this.payIndex == 1 ? 2 : 3,
							pay_type: this.pay[this.payIndex].id,
							code: loginRes.code
						});
						this.isSubmit = false
						if(code){
							var pls = data
							let that = this
							
							// 余额支付
							if(this.pay[this.payIndex].id != 2) {
								that.toast("支付成功")
								setTimeout(() => {
									if(that.share_project_id){
										if(that.share_project_id == that.peoject_id){
											that.$u.vuex("share_user_id","")
										}
									}
									if (that.isShop) {
										uni.navigateTo({
											url:`../mine/submitSuccess?type=4&order_id=` + that.order_id + '&is_single=' + this.is_single
										})
									} else {
										uni.navigateTo({
											url:`../mine/submitSuccess?type=6&order_id=` + that.orderId + '&is_single=' + this.is_single
										})
									}
									this.$u.vuex("is_single", 0)
								}, 500)
								if(this.share_project_id){
									if(this.share_project_id == this.peoject_id){
										this.$u.vuex("share_user_id","")
									}
								}
								return 
							}
							
							
							
							uni.requestPayment({
								provider: "wxpay",
								appid: pls.appId,
								timeStamp: pls.timeStamp,
								nonceStr: pls.nonceStr,
								package: pls.package,
								signType: pls.signType,
								paySign: pls.paySign,
								success(res) {
									if (res.errMsg == "requestPayment:ok") {
										that.toast("支付成功")
										setTimeout(() => {
											if(that.share_project_id){
												if(that.share_project_id == that.peoject_id){
													that.$u.vuex("share_user_id","")
												}
											}
											if (that.isShop) {
												uni.navigateTo({
													url:`../mine/submitSuccess?type=4&order_id=` + that.orderId + '&is_single=' + this.is_single
												})
											} else {
												uni.navigateTo({
													url:`../mine/submitSuccess?type=6&order_id=` + that.orderId + '&is_single=' + this.is_single
												})
											}
											this.$u.vuex("is_single", 0)
										}, 500)
										if(this.share_project_id){
											if(this.share_project_id == this.peoject_id){
												this.$u.vuex("share_user_id","")
											}
										}
									}
								},
								fail(e) {
									if (e.errMsg == "requestPayment:fail cancel") {
										that.toast("支付已取消")
									} else {
										that.toast("支付失败" + e.errMsg)
									}
								},
							});
						}
					},
				})
			},
			async submit(){
				let tech = []
				let project_ids = []
				// console.log(4, this.makeTech, this.projectList)
				this.makeTech.forEach((ele)=>{
					tech.push(ele.staff_id)
				})
				
				this.form.tech = tech.join(",") // 技师
				this.form.remark = this.remarks // 备注
				this.form.name = this.makeName // 姓名
				this.form.mobile = this.makePhone // 手机
				this.form.date = this.makeDays // 日期
				this.form.time = this.makeTime // 时间节点
				this.form.user_num = this.makeNum // 人数
				
				if (this.is_single == 1) this.form.is_single = 1
				
				// this.form.time = '10:00' // 时间节点
				
				let peojectData = this.peoject_id.split(',')
				let newPeojectData = []
				peojectData.forEach(item =>{
					newPeojectData.push({id: item, number: 1})
				})
				// console.log(23, peojectData)
				// return
				this.form.project_data = newPeojectData
				this.form.store_id = this.store_id
				
				if (this.fid) this.form.staff_id = this.fid
				if (this.cid) this.form.staff_sub_id = this.cid
				
				// if(this.userInfo.vip_id >= 1){
				// 	this.form.is_vip = this.form.coupon_id ? 0 : 1
				// }else{
				// 	this.form.is_vip = 0
				// }
				// console.log(this.form,"8888")
				
				if(this.isSubmit)return
				this.isSubmit = true
				console.log(this.form,"this.form")
				let {code,data, msg} = await this.$u.api.buyProject(this.form);
				console.log(454, msg)
				this.isSubmit = false
				this.buyProjectCode = code
				console.log(34, this.buyProjectCode)
				if(code){
					this.out_trade_no = data.out_trade_no
					this.orderId = data.order_id
					if (this.negotiation){
						this.negotiation = false
						return
					}
					this.wxPayFun()
				}
			},
			valChange(val){
				this.form.number = val.value
				this.salsePrice = this.details.price * this.form.number
				let price = this.details.price * this.form.number
				let vipPrice = this.details.vip_price * this.form.number
				this.discountAmount = price*1 - vipPrice*1
				// 优惠券重新计算
				let totalPrice
				if(this.form.coupon_id){
					totalPrice = this.details.price * this.form.number
					if(this.couponInfo.couponPool.off_type == 1){
						// 获取折扣后价格
						let price = Number(totalPrice * (this.couponInfo.couponPool.discount / 10)).toFixed(2)
						//计算差价是否超过100
						let diffPrice = totalPrice - price
						// console.log(totalPrice,price,diffPrice,"dsds")
						if(diffPrice < this.couponInfo.couponPool.max_discount*1){
							this.totalPrice = totalPrice - diffPrice
							this.couponPrice = diffPrice
						}else{
							this.totalPrice = totalPrice -  this.couponInfo.couponPool.max_discount*1
							this.couponPrice = this.couponInfo.couponPool.max_discount*1
						}
						if(this.totalPrice<0){
							this.totalPrice = 0
						}
					}else{
						this.totalPrice = totalPrice - this.couponInfo.couponPool.face_value *1
						this.couponPrice = this.couponInfo.couponPool.face_value
						if(this.totalPrice<0){
							this.totalPrice = 0
						}
					}
				}else{
					if(this.userInfo.vip_id >= 1 ){
						totalPrice = this.details.vip_price * this.form.number
					}else{
						totalPrice = this.details.price * this.form.number
					}
					// let price = this.details.price * this.form.number
					// let vipPrice = this.details.vip_price * this.form.number
					// this.discountAmount = price*1 - vipPrice*1
					this.totalPrice = totalPrice
					this.oldPrice = totalPrice
					
				}
				// console.log(totalPrice,this.form.number)
			},
			getStausText(val){
				switch(val){
					case 0 :
					return '通用券'
					case 1 :
					return '商品券'
					case 2 :
					return '项目券'
				}
			},
			// 获取优惠券列表
			async getCouponList(){
				console.log(7, this.details.project[0].id)
				let {code,data} = await this.$u.api.getCoupon({store_id:this.store_id,coupon_scope_use_id:2, relation_id: this.details.project[0].id+''});
				if(code){
					let arr = []
					data.forEach((ele)=>{
						ele.isCheck = false
						if(ele.couponPool.off_type == 0){
							let price = Number(this.oldPrice1)
							console.log(555, price, +ele.couponPool.min_value)
							if(price >= +ele.couponPool.min_value){
								arr.push(ele)
							}
						}else{
							arr.push(ele)
						}
					})
					this.couponList = arr
				}
			},
			// 选择要使用的优惠券
			chioseCoupon(ele,index){
				this.couponList.forEach((ele,index1)=>{
					if(index != index1){
						ele.isCheck = false
					}else{
						ele.isCheck = !ele.isCheck
					}
				})
				let totalPrice
				if(ele.isCheck){
					// this.couponInfo = ele
					this.form.coupon_id = ele.id
					// totalPrice = this.details.price * this.form.number
					// if(ele.couponPool.off_type == 1){
						// 获取折扣后价格
						// let price = Number(totalPrice * (ele.couponPool.discount / 10)).toFixed(2)
						//计算差价是否超过100
						// let diffPrice = totalPrice - price
						// console.log(totalPrice,price,diffPrice,"dsds")
						// if(diffPrice < ele.couponPool.max_discount*1){
							// this.totalPrice = totalPrice - diffPrice
							// this.couponPrice = diffPrice
						// }else{
							// this.totalPrice = totalPrice -  ele.couponPool.max_discount*1
							// this.couponPrice = ele.couponPool.max_discount*1
						// }
						// if(this.totalPrice<0){
						// 	this.totalPrice = 0
						// }
					// }else{
						// this.totalPrice = totalPrice - ele.couponPool.face_value *1
						// this.couponPrice = ele.couponPool.face_value
						// if(this.totalPrice<0){
						// 	this.totalPrice = 0
						// }
					// }
				}else{
					// if(this.userInfo.vip_id >= 1 ){
					// 	totalPrice = this.details.vip_price * this.form.number
					// }else{
					// 	totalPrice = this.details.price * this.form.number
					// }
					this.form.coupon_id = ""
					// this.couponInfo = ""
					// this.totalPrice = totalPrice
				}
				// console.log(this.couponInfo)
				this.showCoupon = false
				this.getDetails()
			},
			// 获取订单详情-从订单进来
			async getOrders(orderNo,id){
				let {code,data} = await this.$u.api.getOrders({id:id});
				
				if (this.isShop == '0') { // 项目
					data.project.forEach(item =>{
						item.project.pic = item.project.pic ? item.project.pic.split(",") : []
						item.project.tags = item.project.tags ? item.project.tags.split(",") : []
					})
					this.details = data
					this.orderId = data.id
					console.log(343, this.orderId)
					this.details.project = data.project
					// this.details.pic = data.project[0].project.pic.split(",")
					// this.details.tags = data.project[0].project.tags.split(",")
					// let price = this.details.price
					// let vipPrice = this.details.vip_price
					// this.discountAmount = price*1 - vipPrice*1
					this.discountAmount = data.vip_money
					this.salsePrice = data.goods_total
					this.couponPrice = data.coupon_money
					
					// 推荐项目不可以会员卡支付
					if (data.relation_id > 0) {
						
					}
					
					this.totalPrice = data.orders_payable
					this.oldPrice = this.details.price
					this.oldPrice1 = this.details.price
				} else { // 商品
					data.goods.forEach(item =>{
						item.pic = item.goods_images.split(",")
					})
					this.details = data
					this.details.goods = data.goods
					// this.details.name = data.goods[0].goods_name
					// this.details.pic = data.goods[0].goods_images.split(",")
					// this.details.price = data.goods[0].sale_price
					// this.form.number = data.goods[0].number
					this.details.freight = data.freight
					this.details.integral_price = data.integral_price
					this.details.duration = 0
					this.isDelivery = data.address.address_type === 2 ? true : false
					this.addressStore = data.address.store
					this.details.address_time = data.address.address_time
					
					let price = this.details.sale_price
					let vipPrice = this.details.vip_price
					// this.discountAmount = price*1 - vipPrice*1
					this.discountAmount = data.vip_money
					this.salsePrice = this.details.goods_total
					if (+data.coupon_money > 0){
						this.couponPrice = +data.coupon_money
					}
					this.totalPrice = data.orders_payable
					this.oldPrice = this.details.sale_price
					this.oldPrice1 = this.details.sale_price
				}
				
				// this.submit()
				// this.getCouponList()
			},
			// 获取订单详情-预约进来
			async getDetails(){
				// 获取预约项目
				if(this.chioseProjects.length){
					this.projectList = [...this.chioseProjects,...this.makeProject]
				}else{
					this.projectList = [...this.makeProject]
				}
				// console.log(44, this.projectList)
				let newData = []
				this.projectList.forEach(item =>{
					newData.push({id: item.id, number: 1})
				})
				// console.log(999, this.form.coupon_id)
				let {code,data} = await this.$u.api.confirmProjectOrders({project_data: newData, coupon_id: this.form.coupon_id, is_single: this.is_single == 1 ? 1 : 0});
				if(code){
					this.details.project = this.projectList
					// 回显数据
					this.details.project.forEach(item =>{
						item.project = {}
						item.project.name = item.name
						item.project.pic = item.pic.split(",")
						let plData = []
						item.tags.forEach(row => {
							if (row.tags) plData.push(row.tags.name)
						})
						item.project.tags = plData
						item.project.price = item.price
						item.number = item.use_num
					})
					this.salsePrice = data.sale_price
					this.couponPrice = data.discount_price
					this.discountAmount = data.vip_discount
					this.totalPrice = data.pay_price
					
					this.oldPrice1 = data.pay_price
					// this.submit()
					this.getCouponList()
				}
				
			},
		}
	}
</script>

<style>
	page{
		background-color: #F6F7FA;
	}
</style>
<style lang="scss" scoped>
.pages{
	padding: 50rpx 32rpx 200rpx 32rpx;
	.icon-a-xingzhuang1{
		color: #007664 !important;
	}
	.couponList{
		.list{
			width: 686rpx;
			height: 161rpx;
			position: relative;
			margin-bottom: 20rpx;
			image{
				width: 686rpx;
				height: 161rpx;
				position: absolute;
				top: 0;
			}
			.couponContent{
				width: 686rpx;
				height: 161rpx;
				position: absolute;
				top: 0;
				z-index: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 26rpx 34rpx 31rpx  50rpx;
				.left{
					display: flex;
					.couponL{
						color: #007664;
						margin-right: 52rpx;
						.price{
							font-size: 22rpx;
							line-height: 74rpx;
							text{
								font-size: 53rpx;
							}
						}
						.fullReduction{
							font-size: 22rpx;
						}
					}
					.couponM{
						.t1{
							color: #333333;
							font-size: 24rpx;
							margin-bottom: 14rpx;
							line-height: 33rpx;
							margin-top: 20rpx;
						}
						.t2{
							color: #666666;
							font-size: 17rpx;
						}
					}
				}
				.couponR{
					width: 104rpx;
					border-left: 2rpx dashed rgba(207,11,43,.3);
					height: 137rpx;
					position: relative;
					.icon{
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						font-size: 42rpx;
						color: #979797;
					}
				}
			}
		}
	}
	.chioseTitle{
		text-align: center;
		margin-top: 40rpx;
		color: #333333;
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	.goods-box{
		// margin-top: 15rpx;
		.goods{
			display: flex;
			margin-bottom: 20rpx;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 24rpx;
			image{
				width: 188rpx;
				height: 188rpx;
				border-radius: 8rpx;
			}
			>view{
				flex: 1;
				// padding: 30rpx;
				// display: flex;
				// flex-direction: column;
				// justify-content: space-between;
				margin-left: 20rpx;
				position: relative;
			}
			.t1{
				display: flex;
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				color: #1D2129;
				line-height: 37rpx;
				text{
					font-size: 20rpx;
					font-weight: 400;
					text-align: right;
					color: #999999;
					line-height: 28rpx;
				}
			}
			.tt{
				margin: 10rpx 0;
				view{
					display: inline-block;
					padding: 7rpx 12rpx;
					color: #E8C778;
					border: 1rpx solid #E8C778;
					font-size: 16rpx;
					margin-right: 20rpx;
				}
			}
			.t2{
				display: inline-block;
				padding: 5rpx 8rpx;
				border-radius: 6rpx;
				color: #E8BC88;
				font-size: 16rpx;
				text-align: center;
				background: linear-gradient(135deg, #2D3039 0%, #495057);
				margin-right: 15rpx;
				
				image{
					width: 16rpx;
					height: 16rpx;
					position: relative;
					top: 3rpx;
					margin-right: 10rpx;
				}
			}
			.price{
				display: flex;
				align-items: center;
				margin-top: 14rpx;
				.text{
					width: 100%;
					// border: 1rpx solid red;
					font-size: 32rpx;
					font-weight: 400;
					color: #007664;
					text-align: left;
					line-height: 33rpx;
					letter-spacing: 1px;
					position: absolute;
					left: 0;
					bottom: 0;
				}
				.left-auto{
					position: absolute;
					right: 0;
					bottom: 0;
				}
				.make{
					font-size: 24rpx;
					font-weight: 400;
					color: #007664;
					line-height: 33rpx;
					letter-spacing: 1px;
					margin-right: 18rpx;
				}
				.buy{
					width: 93rpx;
					height: 49rpx;
					background: #d5bc81;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 400;
					text-align: center;
					color: #ffffff;
					line-height: 49rpx;
					letter-spacing: 1px;
				}
			}
		}
		
	}
	
	.card-box{
		background: #ffffff;
		border-radius: 8rpx;
		padding: 0 32rpx;
		margin-bottom: 20rpx;
		.card-zi{
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid hsla(0, 0%, 56%, 0.24);
			&:last-child{
				border: none;
			}
			text{
				font-size: 26rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				line-height: 26rpx;
			}
			.hui{
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 26rpx;
			}
			.price{
				font-size: 24rpx;
				font-weight: 400;
				color: #007664;
				line-height: 26rpx;
			}
			.noCoupon{
				color: #999999;
				font-size: 24rpx;
			}
		}
	}
	.select-pay{
		padding: 40rpx 43rpx;
		.title{
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
			line-height: 37rpx;
			margin-bottom: 38rpx;
		}
		.select{
			display: flex;
			align-items:center;
			margin-bottom: 36rpx;
			font-size: 28rpx;
			font-weight: 400;
			text-align: left;
			color: #333333;
			line-height: 40rpx;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
			.iconfont{
				padding: 10rpx 20rpx;
			}
			.icon-a-xingzhuang1{
				color: rgba(209,184,125,1);
			}
		}
		.price-box{
			border-top: 1px solid #d8d8d8;
			padding-top: 50rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: 400;
			text-align: left;
			color: #666666;
			line-height: 42rpx;
			text{
				font-size: 30rpx;
				font-weight: 400;
				text-align: left;
				color: #007664;
				line-height: 42rpx;
			}
			.btn{
				margin-left: auto;
				width: 236rpx;
				height: 70rpx;
				background: #007664;
				border-radius: 6rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.bottom-buy{
		z-index: 99;
		box-shadow: 0px 0px 13rpx 0px rgba(110,126,189,0.18); 
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		// @if env(safe-area-inset-bottom)!=0{
		// 	padding: 35rpx 35rpx env(safe-area-inset-bottom);
		// }@else{
			padding: 35rpx;
		// }
		display: flex;
		align-items: center;
		background-color: #fff;
		.total-price{
			font-size: 30rpx;
			text-align: left;
			color: #666666;
			line-height: 42rpx;
			text{
				font-size: 30rpx;
				font-weight: 400;
				color: #007664;
				line-height: 42rpx;
				text{
					font-size: 24rpx;
					color: #666666;
					margin-left: 7rpx;
				}
			}
		}
		.btn-bai{
			width: 174rpx;
			height: 70rpx;
			border: 1px solid #007664;
			border-radius: 6rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #007664;
			display: flex;
			justify-content: center;
			align-items: center;
			// text-align: center;
			// line-height: 70rpx;
		}
		.btn-ho{
			width: 200rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #50DCC2 0%, #007664 );
			border-radius: 45rpx;
			font-size: 30rpx;
			font-weight: 400;
			color:#ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
.payForAnother{
	position: absolute;
	right: 280rpx;
	top: 60rpx;
	
	font-size: 30rpx;
	font-weight: 400;
	color:#007664;
	
}
.specification{
	width: 500rpx;
	height: 400rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	position: relative;
	.close{
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		padding: 20rpx;
		font-size: 44rpx;
		color: #8A8A8A;
	}
	padding: 40rpx;
	text-align: center;
	margin: 0 auto;
	&__title{
		width: 100%;
		font-size: 32rpx;
		font-weight: bold;
	}
	&__dec{
		font-size: 28rpx;
		margin-top: 80rpx;
	}
	.subimts{
		width: 100%;
		text-align: center;
		margin: 0rpx auto 0;
		button{
			border: none;
			background: #007664;
			color: white;
			font-size: 30rpx;
			font-weight: 400;
			// position: absolute;
			// left: 0;
			// top: 0;
		}
		button::after{
			border: none;
			padding: 0;
			margin: 0;
		}
	}
}
	::v-deep .u-icon-minus{
		background: #ededed !important;
		color: #b9b9b9!important;
	}	
	
	
	.groupList{
		width: 100%;
		padding: 0 32rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		margin: 20rpx 0 34rpx 0;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 96rpx;
			color: #333333;
			font-size: 26rpx;
			border-bottom: 1rpx solid rgba(142,142,142,.24);
			position: relative;
			.image{
				width: 33rpx;
				height: 33rpx;
				display: inline-block;
				position: relative;
				top: 5rpx;
				margin-right: 19rpx;
			}
			.imgs{
				width: 33rpx;
				height: 33rpx;
				display: inline-block;
				position: absolute;
				right: 0;
			}
			.right{
				font-size: 24rpx;
				display: flex;
				align-items: center;
				text{
					margin-right: 32rpx;
				}
			}
		}
		.items{
			// padding: 40rpx 43rpx;
			// padding-top: 28rpx;
			.title{
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
				line-height: 37rpx;
				margin-bottom: 38rpx;
			}
			.select{
				display: flex;
				align-items:center;
				// margin-bottom: 36rpx;
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				line-height: 40rpx;
				border-bottom: 1rpx solid rgba(142,142,142,.24);
				padding: 28rpx 0;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
				}
				.iconfont{
					padding: 10rpx 20rpx;
				}
				.icon-a-xingzhuang1{
					color: #007664;
				}
				&:last-child{
					border: none;
				}
			}
			.price-box{
				border-top: 1px solid #d8d8d8;
				padding-top: 50rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: 400;
				text-align: left;
				color: #666666;
				line-height: 42rpx;
				>text{
					font-size: 30rpx;
					font-weight: 400;
					text-align: left;
					color: #007664;
					line-height: 42rpx;
					text{
						font-size: 20rpx;
						font-weight: 400;
						color: #666666;
						line-height: 42rpx;
					}
				}
				.btn{
					margin-left: auto;
					width: 236rpx;
					height: 70rpx;
					background: #007664;
					border-radius: 6rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.item:last-child{
			border-bottom: 1rpx solid #F6F7FA;
		}
	}
	.takeMain{
		margin-top: 10rpx;
		&-view{
			border-radius: 20rpx;
			padding: 32rpx 24rpx;
			background: white;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			&:last-child{
				border-bottom: none;
			}
			&-main{
				width: 100%;
				margin-left: 16rpx;
				.title{
					font-size: 24rpx;
					color: #666666;
					padding: 20rpx 0 0 0;
				}
				.site{
					display: flex;
					font-size: 28rpx;
					color: #333333;
					text{
						flex: 1;
						&:last-child{
							text-align: right;
						}
					}
				}
				.default{
					display: inline-block;
					width: 72rpx;
					height: 36rpx;
					background: #32C2B3;
					border-radius: 6rpx;
					color: white;
					line-height: 36rpx;
					text-align: center;
					margin-left: 16rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					position: relative;
					top: -3rpx;
				}
			}
		}
	}
	
</style>
